﻿@page "/components/dialog"

<DocsPage>
    <DocsPageHeader Title="Dialog">
        <Description>A dialog will overlay your current app content, providing the user with either information, a choice, or other tasks.</Description>
    </DocsPageHeader>
    <DocsPageContent>

        <DocsPageSection>
            <MudText Typo="Typo.h6" GutterBottom="true">Note</MudText>
            <MudText>The Dialog is dependant on <CodeInline Class="docs-code-tertiary">IDialogService</CodeInline> and <CodeInline>MudDialogProvider</CodeInline></MudText>
            <MudText>Check the <MudLink Href="/getting-started/installation">Installation</MudLink> page for instructions regarding default setup.</MudText>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Usage">
                <Description>
                    Suppose you define a <CodeInline>MudDialog</CodeInline> in <CodeInline Class="docs-code-tertiary">TermsOfServiceDialog.razor</CodeInline>. 
                    To show the dialog you simply call:
                    <p> 
                    <CodeInline>DialogService.Show&lt;<CodeInline Class="docs-code-tertiary">TermsOfServiceDialog</CodeInline>&gt;("Terms");</CodeInline>
                    </p>
                    The advantage of having the dialog in its own Razor component is obviously the ability to reuse it throughout your code-base. 
                    You can pass parameters to your dialog on show which allow you to load the dialog with custom data.
                </Description>
            </SectionHeader>
            <SectionContent Codes="@(new[] {new CodeFile("Page.razor", "DialogUsageExample"), new CodeFile("Dialog.razor", "DialogUsageExample_Dialog")})">
                <DialogUsageExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Configuration">
                <Description>
                    The dialog's default behavior can be changed in two ways, either globally with parameters in the <CodeInline>&lt;MudDialogProvider/&gt;</CodeInline> or pass down the <CodeInline>DialogOptions</CodeInline> class when you open the dialog.
                </Description>
            </SectionHeader>
            <SectionSubGroups>
                
                <DocsPageSection>
                    <SectionHeader Title="Global Settings">
                        <Description>In the file where you added <CodeInline>&lt;MudDialogProvider/&gt;</CodeInline>, we can pass down different options as parameters. See <MudLink Href="/getting-started/installation">installation page</MudLink> for more information regarding this.</Description>
                    </SectionHeader>
                    <SectionContent Code="DialogConfigurationExample"/>
                </DocsPageSection>

                <DocsPageSection>
                    <SectionHeader Title="Per Dialog">
                        <Description>
                            Below we pass along the DialogOptions class when we open the dialog, this can be done per dialog or you can predefine a bunch of them that you use for specific cases in your system.<br/>
                        </Description>
                    </SectionHeader>
                    <SectionContent Codes="@(new[] {new CodeFile("Page.razor", "DialogOptionsExample"), new CodeFile("Dialog.razor", "DialogOptionsExample_Dialog")})">
                        <DialogOptionsExample />
                    </SectionContent>
                </DocsPageSection>

                <DocsPageSection>
                    <SectionHeader Title="From dialog">
                        <Description>
                            The title and the options can also be modified from the dialog component itself by calling <CodeInline>SetTitle</CodeInline> and <CodeInline>SetOptions</CodeInline> on the <CodeInline>MudDialogInstance</CodeInline> object.
                        </Description>
                    </SectionHeader>
                    <SectionContent Codes="@(new[] {new CodeFile("Page.razor", "DialogSetOptionsExample"), new CodeFile("Dialog.razor", "DialogSetOptionsExample_Dialog")})">
                        <DialogSetOptionsExample />
                    </SectionContent>
                </DocsPageSection>
                
            </SectionSubGroups>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Templating and Passing Simple Data">
                <Description>In this section, we will demonstrate how you can build one dialog and reuse it for multiple purposes.</Description>
            </SectionHeader>
            <SectionContent Codes="@(new[] {new CodeFile("Page.razor", "DialogTemplateExample"), new CodeFile("Dialog.razor", "DialogTemplateExample_Dialog")})">
                <DialogTemplateExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Passing Data">
                <Description>Here is a little more advanced use case. We will use the same dialog but feed it with different server data and then mimic a delete operation.</Description>
            </SectionHeader>
            <SectionContent Codes="@(new[] {new CodeFile("Page.razor", "DialogPassingDataExample"), new CodeFile("Dialog.razor", "DialogPassingDataExample_Dialog")})">
                <DialogPassingDataExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Scrollable Dialog">
                <Description>Quick example on how to give your dialog scrollable content.</Description>
            </SectionHeader>
            <SectionContent Codes="@(new[] {new CodeFile("Page.razor", "DialogScrollableExample"), new CodeFile("Dialog.razor", "DialogScrollableExample_Dialog")})">
                <DialogScrollableExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Inlining Dialog">
                <Description>
                    You can inline <CodeInline>MudDialog</CodeInline> directly in another component which, of course, makes most sense for small dialogs that are not re-used somewhere else.
                    The advantage is that you can easily share code and data between dialog and owning component via bindings.
                    <br />
                    This example also shows how to override the dialog title with a render fragment. 
                </Description>
            </SectionHeader>
            <SectionContent Code="DialogInlineExample">
                <DialogInlineExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Keyboard Navigation">
                <Description>
                    <MudText>MudDialog accepts keys to keyboard navigation.</MudText>
                    <br />
                    <MudText><CodeInline>Escape</CodeInline> key to close dialog. Closing a dialog by pressing escape has to be enabled by setting option <CodeInline>CloseOnEscapekey=true</CodeInline></MudText>
                </Description>
            </SectionHeader>
            <SectionContent Codes="@(new[] {new CodeFile("Page.razor", "DialogKeyboardNavigationExample"), new CodeFile("Dialog.razor", "DialogKeyboardNavigationExample_Dialog")})">
                <DialogKeyboardNavigationExample />
            </SectionContent>
        </DocsPageSection>

    </DocsPageContent>
</DocsPage>
